<template>
  <div class="box">
    <div 
      v-if="showTitle"
      class="title"
      :style="'background-color:' + titleBg + ';color: ' + titleFontColor"
    >
      <div class="left">
        <span>{{leftTitle}}</span>
      </div>
      <div class="right" @click="handleRightClick">
        <span>{{rightTitle}}</span>
      </div>
    </div>
    <div 
      :class="showTitle ? 'showT' : 'hideT'"
      class="content"
      :style="overFlowShow + 'background-color:' + contentBg"
    >
      <slot name="content"></slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'box',
  props: {
    showTitle: {
      default: false,
    },
    overFlowShow: {
      default: ''
    },
    leftTitle: {
      default: ''
    },
    rightTitle: {
      default: ''
    },
    titleBg:{
      default: 'rgba(65,193,248,0.2)'
    },
    contentBg: {
      default: 'rgba(65,193,248,0.2)'
    },
    titleFontColor: {
      default: 'white'
    }
  },
  data () {
    return {}
  },
  methods: {
    handleRightClick (e) {
      this.$emit('rightClick', e);
    }
  }
}
</script>

<style scoped>
.left{
  float: left;
  font-size: 16px;
  margin-left: 10px;
}
.right{
  margin-right: 10px;
  font-size: 14px;
  float: right;
  cursor: pointer;
}
.box{
  border: 1px solid #41C1F8;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}
.title{
  border-bottom: 1px solid #41C1F8;
  height: 40px;
  line-height: 40px;
  user-select: none;
}
.content{
  overflow-y: scroll;
  overflow-x: hidden;
}
.hideT{
  height: 100%;
}
.showT{
  height: calc(100% - 40px);
}
</style>
